<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<head>
<style>
div {
  background: rgb(76, 175, 80);
  padding: 10px;
}

div.first {
  background: rgba(76, 175, 80, 0.1);
}

div.second {
  background: rgba(76, 175, 80, 0.3);
}

div.third {
  background: rgba(76, 175, 80, 0.6);
}
</style>
</head>
<body>

    <h1>透明框</h1>
    <p>使用 opacity：</p>
    <div style="opacity:0.1;">
        <p>10% opacity</p></div>
    <div style="opacity:0.3;">
        <p>30% opacity</p></div>
    <div style="opacity:0.6;">
        <p>60% opacity</p></div>
    <div><p>opacity 1</p></div>

    <p>使用 RGBA 颜色值：</p>
    <div class="first">
        <p>10% opacity</p></div>
    <div class="second">
        <p>30% opacity</p></div>
    <div class="third">
        <p>60% opacity</p></div>
    <div><p>default</p></div>
    <p>注意使用 opacity 属性时文本以及背景颜色如何变得透明。</p>
</body>
</html>